<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
		<title>问答知识库</title>
		<link rel="icon" href="favicon.ico" type="image/ico">
		<meta name="author" content="yinqi">
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link href="css/materialdesignicons.min.css" rel="stylesheet">
		<link href="css/style.css" rel="stylesheet">

		<script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.css">
		<script src="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
		<script src="js/ServerUrl.js"></script>
		<script type="text/javascript">
			$(function() {
				$('#rankTable').bootstrapTable({
					method: 'get',
					contentType: "application/x-www-form-urlencoded",
					dataType: "json",
					url: serverUrl + "/findRank",
					columns: [{
							title: '姓名',
							field: 'sendname',
							sortable: false
						},
						{
							title: '提交问答数',
							field: 'times',
							sortable: true
						}
					],
					locale: 'zh-CN' //中文支持,
				})
				initQuestion();
				findCommentAll();
			})

			function setDelVisibale() {
				var identity = Cookies.get('identity');
				if (identity == "normal") {
					$('.delete').css('display', 'none');
				} else if (identity == "admin") {
					$('.delete').css('display', 'block');
				}
			}

			function setComment() {

				//定义变量获取屏幕视口宽度
				var windowWidth = $(window).width();
				if (windowWidth < 640) {
					// do something
					$(".commenttime").attr("style", "display:none;");
					$(".replaycommenttime").attr("style", "display:none;");
				}
				if (windowWidth >= 640) {
					// do something
				}
			}

			function initQuestion() {

				document.getElementById("questionGroup").innerHTML = "";
				$.ajax({
					//几个参数需要注意一下
					type: "get", //方法类型
					dataType: "json", //预期服务器返回的数据类型
					url: serverUrl + "/findQuestionsAll",
					success: function(result) {
						for (var i in result) {
							console.log(result[i]);
							var theme;
							var randon = i % 4;
							if (randon == 0) {
								theme = "primary";
							}
							if (randon == 1) {
								theme = "cyan";
							}
							if (randon == 2) {
								theme = "danger";
							}
							if (randon == 3) {
								theme = "info";
							}
							var status = "";
							if (i == 0)
								status = "in";
							$('#questionGroup').append('<div class="panel panel-' + theme + '">' +
								'<div class="panel-heading" role="tab" id="heading' + i + '">' +
								'<h4 class="panel-title">' +
								'<a role="button" data-toggle="collapse" href="#collapse' + i + '"' +
								'aria-expanded="true" aria-controls="collapse' + i + '">【问】：' +
								result[i].question +
								'</a>' +
								'</h4>' +

								'</div>' +
								'<div id="collapse' + i + '" class="panel-collapse collapse ' + status + '"' +
								'role="tabpanel" aria-labelledby="heading' + i + '">' +
								'<div class="panel-body">【答】：' +
								result[i].answer +
								"<button class='btn btn-sm btn-round btn-danger delete'  onclick='deleteQuestion(" +
								result[i].id +
								")' style='margin-top:10px;float: right;display:none;'>删除</button>" +
								'</div>' +
								'</div>' +
								'</div>');
						}
						$('#sumQuestion').text(result.length);
						setDelVisibale();
					},
					error: function() {
						layer.msg('findScoreThisClient异常');
					}
				});
			}


			function submitQuestion() {
				var sendname = Cookies.get('username');
				var question = document.getElementById('questioninput').value;
				var answer = document.getElementById('answerinput').value;
				$.ajax({
					//几个参数需要注意一下
					type: "post", //方法类型
					dataType: "json", //预期服务器返回的数据类型
					data: {
						"sendname": sendname,
						"question": question,
						"answer": answer
					},
					url: serverUrl + "/insertQuestion",
					success: function(result) {
						$('#rankTable').bootstrapTable('refresh');
						initQuestion();

					},
					error: function() {
						layer.msg('insertQuestion异常');
					}
				});
			}

			function insert_comment(id, username, comment, time, photo) {
				var innerdiv = "<div class='form-group'>" +
					"<div class='col-xs-12'>" +
					"<img src='http://q.qlogo.cn/headimg_dl?dst_uin=123&spec=100' style='float: left;width: 40px;height: 40px;border-radius: 100px;'/>" +
					"<label style='line-height: 40px;float: left;margin-left: 20px;' id='username" + id + "'>" + username +
					"</label>" +
					"<h5 style='line-height: 40px;float: left;margin-left: 20px;color:#c6c6c6' class='commenttime'>" + time +
					"</h5>" +
					"</div>" +
					"<div class='col-xs-12'>" +
					"<h5 style='line-height: 50px;float: left;margin-left: 60px;' id='pinglun'>" + comment + "</h5>" +
					"<button class='btn btn-sm btn-round btn-danger delete' onclick='deleteComment(" + id +
					")' style='float: right;margin-bottom: 10px;margin-left: 10px;display:none;' onclick='replayBtn(" + id +
					",\"" +
					username + "\")'>删除</button>" +
					"<button class='btn btn-sm btn-round btn-primary' style='float: right;margin-bottom: 10px;' onclick='replayBtn(" +
					id + ",\"" +
					username + "\")'>回复</button>" +
					"</div>" +
					"<div style='clear: both;height: 0.1px;width: 100%;background-color: #00c28e;'>" +
					"</div>" +
					"</div>" +
					"<div id='sondiv" + id + "'></div>";
				$("#commentdiv").append(innerdiv);
			}

			function insert_replaycomment(id, username, comment, time, replayid, replayname) {
				var innerdiv = "<div class='form-group' style='margin-left: 40px;'>" +
					"<div class='col-xs-12'>" +
					"<img src='http://q.qlogo.cn/headimg_dl?dst_uin=123&spec=100' style='float: left;width: 25px;height: 25px;border-radius: 100px;'/>" +
					"<label style='line-height: 25px;float: left;margin-left: 20px;font-size:12px;' id='username" + id + "'>" +
					username + "</label>" +
					"<h5 style='line-height: 25px;float: left;margin-left: 10px;font-size:10px;' class='commenttime'>回复<label style='color:#5555ff'>@" +
					replayname + "</label></h5>" +
					"<h5 style='line-height: 25px;float: left;margin-left: 10px;font-size:5px;color:#d4d4d4' class='commenttime'>" +
					time + "</h5>" +

					"</div>" +
					"<div class='col-xs-12'>" +
					"<h5 style='line-height: 30px;float: left;margin-left: 45px;font-size:12px;' id='pinglun'>" + comment +
					"</h5>" +
					"<button class='btn btn-sm btn-round btn-danger delete' onclick='deleteComment(" + id +
					")' style='float: right;margin-left: 10px;display:none;' onclick='replayBtn(" + id + ",\"" +
					username + "\")'>删除</button>" +
					"<button class='btn btn-sm btn-round btn-normal' style='float: right;' onclick='replayBtn(" + id + ",\"" +
					username + "\")'>回复</button>" +
					"</div>" +
					"<div style='margin-top: 10px;clear: both;height: 0.1px;width: 100%;background-color: #ebebeb;'>" +
					"</div>" +
					"</div>" +
					"<div id='sondiv" + id + "'></div>";
				$("#sondiv" + replayid).append(innerdiv);
			}

			function commentBtn() {
				$('#commentModal').modal();
			}

			function replayBtn(id, username) {
				$('#replayid').attr('value', id);
				$('#replayname').text(username);
				$('#replayModal').modal();
			}

			function submitComment() {
				var commentinput = document.getElementById('commentinput').value;
				var senduserid = Cookies.get('id');
				$.ajax({
					//几个参数需要注意一下
					type: "post", //方法类型
					dataType: "json", //预期服务器返回的数据类型
					url: serverUrl + "/insertComment",
					data: {
						"senduserid": senduserid,
						"comment": commentinput,
						"replayid": "noreplay"
					},
					success: function(result) {
						document.getElementById("commentdiv").innerHTML = "";
						findCommentAll();
					},
					error: function() {
						layer.msg('insertQuestion异常');
					}
				});
			}

			function submitReplay() {
				var commentinput = document.getElementById('replayinput').value;
				var replayid = document.getElementById('replayid').value;
				console.log('replayid', replayid);
				var senduserid = Cookies.get('id');
				$.ajax({
					//几个参数需要注意一下
					type: "post", //方法类型
					dataType: "json", //预期服务器返回的数据类型
					url: serverUrl + "/insertComment",
					data: {
						"senduserid": senduserid,
						"comment": commentinput,
						"replayid": replayid
					},
					success: function(result) {
						document.getElementById("commentdiv").innerHTML = "";
						findCommentAll();
					},
					error: function() {
						layer.msg('insertQuestion异常');
					}
				});
			}

			function findCommentAll() {

				$.ajax({
					//几个参数需要注意一下
					type: "get", //方法类型
					dataType: "json", //预期服务器返回的数据类型
					url: serverUrl + "/findCommentAll",
					success: function(result) {
						for (var i in result) {
							var commentinfo = result[i];
							if (commentinfo.replayid == -1) {
								insert_comment(commentinfo.id, commentinfo.username, commentinfo.comment,
									commentinfo.sendtime, "");
							} else {
								var replayname = document.getElementById("username" + commentinfo.replayid)
								.innerText;
								insert_replaycomment(commentinfo.id, commentinfo.username, commentinfo.comment,
									commentinfo.sendtime, commentinfo.replayid, replayname);
							}
						}
						$('#sumComment').text(result.length);
						setDelVisibale();
					},
					error: function() {
						layer.msg('insertQuestion异常');
					}
				});
			}

			function deleteQuestion(questionid) {
				$.ajax({
					//几个参数需要注意一下
					type: "post", //方法类型
					dataType: "json", //预期服务器返回的数据类型
					url: serverUrl + "/deleteQuestion",
					data: {
						"id": questionid
					},
					success: function(result) {
						$('#rankTable').bootstrapTable('refresh');
						initQuestion();
					},
					error: function() {
						layer.msg('insertQuestion异常');
					}
				});
			}

			function deleteComment(commentid) {
				$.ajax({
					//几个参数需要注意一下
					type: "post", //方法类型
					dataType: "json", //预期服务器返回的数据类型
					url: serverUrl + "/deleteComment",
					data: {
						"id": commentid
					},
					success: function(result) {
						document.getElementById("commentdiv").innerHTML = "";
						findCommentAll();
					},
					error: function() {
						layer.msg('insertQuestion异常');
					}
				});
			}
		</script>
	</head>
	<body onload="setComment()">

		<div class="layout-web">
			<div class="layout-container">
				<!--页面主要内容-->
				<div class="container-fluid">
					<div class="row">
						<div class="col-md-3">
							<div class="card">
								<div class="card-body">
									<h3>共<label id="sumQuestion">0</label>个回答</h3>
									<hr />
									<h5>Top3 排行榜</h5>
									<table class="table" id="rankTable">

									</table>
									<hr />
									<button class="btn btn-secondary" data-toggle="modal"
										data-target="#questionsModel">贡献新的问题和回答</button>
									<div class="modal fade" id="questionsModel" tabindex="-1" role="dialog"
										aria-labelledby="exampleModalLabel">
										<div class="modal-dialog" role="document">
											<div class="modal-content">

												<div class="modal-body">
													<div style="width:100%; height:250px; overflow:auto;">
														<label>写问题</label>
														<input required="required" class="form-control" type="text"
															id="questioninput" name="questioninput">
														<hr />
														<label>写回答</label>
														<textarea required="required" class="form-control"
															id="answerinput" name="answerinput" rows="4"></textarea>
													</div>
												</div>
												<div class="modal-footer">
													<button type="button" class="btn btn-info"
														onclick="submitQuestion()" data-dismiss="modal">提交</button>
													<button type="button" class="btn btn-normal"
														data-dismiss="modal">关闭</button>
												</div>
											</div>
										</div>
									</div>

								</div>
							</div>
						</div>
						<div class="col-md-9">
							<div class="card">
								<div class="card-header">
									<h2>问答知识库</h2>
								</div>
								<div class="card-body">
									<div style="width:100%; height:290px; overflow:auto;">
										<!--手风琴效果-->
										<div id="questionGroup" class="panel-group" role="tablist"
											aria-multiselectable="true">

										</div>
										<!--手风琴效果 End-->
									</div>
								</div>
							</div>
						</div>




						<div class="col-md-3">
							<div class="card">
								<div class="card-body">
									<h3>共<label id="sumComment">0</label>个提问讨论</h3>
									<h5>有不确定的问题欢迎提问</h5>
									<hr />
									<button onclick="commentBtn()"
										class="btn btn-info">&nbsp;&nbsp;去提问&nbsp;&nbsp;</button>
								</div>
							</div>
						</div>
						<div class="col-md-9">
							<div class="card">
								<div class="card-header">
									<h2>讨论区</h2>
								</div>
								<div class="card-body">
									<div id="commentdiv" style="width:100%; height:600px; overflow:auto;">

										<!-- <div class="form-group" style="margin-left: 40px;">
											<div class='col-xs-12'>
												<img src='http://q.qlogo.cn/headimg_dl?dst_uin=123&spec=100'
													style='float: left;width: 25px;height: 25px;border-radius: 100px;' />
												<h5 style='line-height: 25px;float: left;margin-left: 20px;'
													id='username'> username </h5>
										
												<h5 style='line-height: 25px;float: left;margin-left: 20px;'
													class='commenttime'> time</h5>
											</div>
											<div class='col-xs-12'>
												<h5 style='line-height: 30px;float: left;margin-left: 45px;'
													id='pinglun'> comment </h5>
												<button value="" class="btn btn-sm btn-round btn-normal" style='float: right;'
													onclick="replayBtn(this)">回复</button>
											</div>
											<div
												style='margin-top: 10px;clear: both;height: 0.3px;width: 100%;background-color: #dadada;'>
											</div>
										</div> -->
									</div>
								</div>
								<div class="modal fade" id="commentModal" tabindex="-1" role="dialog"
									aria-labelledby="exampleModalLabel">
									<div class="modal-dialog" role="document">
										<div class="modal-content">
											<div class="modal-body">
												<div style="overflow:auto;">
													<h4>提问</h4>
													<hr />
													<textarea placeholder="讲两句" required="required" class="form-control"
														id="commentinput" name="commentinput" rows="4"></textarea>
												</div>
											</div>
											<div class="modal-footer">
												<button type="button" class="btn btn-info" onclick="submitComment()"
													data-dismiss="modal">提交</button>
												<button type="button" class="btn btn-normal"
													data-dismiss="modal">关闭</button>
											</div>
										</div>
									</div>
								</div>
								<div class="modal fade" id="replayModal" tabindex="-1" role="dialog"
									aria-labelledby="exampleModalLabel">
									<div class="modal-dialog" role="document">
										<div class="modal-content">
											<div class="modal-body">
												<div style="overflow:auto;">
													<h4>回复<label id="replayname">TA</label></h4>
													<input id="replayid" style="display: none;" />
													<hr />
													<textarea required="required" class="form-control" id="replayinput"
														name="replayinput" rows="4"></textarea>
												</div>
											</div>
											<div class="modal-footer">
												<button type="button" class="btn btn-info" onclick="submitReplay()"
													data-dismiss="modal">提交</button>
												<button type="button" class="btn btn-normal"
													data-dismiss="modal">关闭</button>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
